<div [formGroup]="configuration.formGroupReference">
    <label class="row">
        <span *ngIf="configuration.showLabel" class="col-4 col-form-label">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </span>
        <span [ngClass]="{ 'col-8': configuration.showLabel, 'col-12': !configuration.showLabel }">
            <select
                [formControlName]="configuration.formControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }} fake-placeholder"
                [ngClass]="{ 'fake-placeholder': applyFakePlaceholderClass }"
            >
                <option value="" class="fake-placeholder" *ngIf="!configuration.required">
                    {{ labelTranslationKey | translate }}
                </option>
                <option *ngFor="let option of configuration.options" [value]="option.key" class="form-control">
                    {{ option.value }}
                </option>
            </select>
            <app-form-input-error
                class="invalid-feedback"
                [formGroupReference]="configuration.formGroupReference"
                [formControlId]="configuration.formControlId"
            >
            </app-form-input-error>
        </span>
    </label>
</div>
